<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" th:href="@{/lib/element-ui/lib/theme-chalk/index.css}">
    <link rel="stylesheet" th:href="@{/main.css}">
</head>
<body>
<div id="app">
    <div class="page-loader" ref="loader">
        <div class="page-loader__spinner">
            <svg viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
            </svg>
        </div>
    </div>

    <el-dialog title="登录聊天室" :visible.sync="dialog" width="35%" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
        <el-form ref="form" :model="form">
            <el-form-item prop="name" label="昵称" label-width="80px" required>
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item prop="avatar" v-model="form.avatar" label="头像" label-width="80px">
                <div class="avatar-uploader">
                    <div @click="handleEditAvatar" class="el-upload">
                        <img v-if="form.avatar" :src="form.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="login('form')">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="选择头像" :visible.sync="avatarDialog" width="40%" :close-on-press-escape="false" :close-on-click-modal="false">
        <div class="modal-body">
            <form>
                <div class="row default_avatars_list">
                    <img v-for="item in avatarList" :src="item.url" @click="changeAvatar(item.url)" title="点击更换！">
                </div>
            </form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary">确 定</el-button>
            <el-button @click="avatarDialog = false">取 消</el-button>
        </span>
    </el-dialog>
</div>
<script th:src="@{/lib/vue.min.js}"></script>
<script th:src="@{/lib/vue-resources.min.js}"></script>
<script th:src="@{/lib/element-ui/lib/index.js}"></script>
<script th:src="@{/api.js}"></script>
<script th:src="@{/login.js}"></script>
</body>
</html>
